/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, BlobInputList, Table, TableBody, TableRow, CCell, TableHead, Cell, useTheme,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {Each_ZdSetting, useTableEditor} from "../../hook/useRepTableEditor";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";
import {MemoDateInput} from "../../../comp/base";

interface Props  extends InternalItemProps{
    config?: any[];
}
const 焊接代号选=['SMAW-FeⅡ-6GX-3/1016-Fef2和FCAW-FeⅡ-6GX(K)-12/660-Fefs-11/15',
    'GTAW-FeⅡ-6G-3/159-FefS-02/11/12和SMAW-FeⅡ-6G(K)-13/159-Fef3J',
    'SMAW-FeⅡ-6G-15/168-Fef3J',
    'GMAW-6G(K)-07/09/19',
    'FCAW-6G(K)-07/09/19',
    ];
//这里第三个name参数：实际就是表格的嵌套属性字段。
const cb项目输入= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <BlobInputList value={(inp?.[name]) || ''} rows={3} datalist={焊接代号选}
                           onListChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
const cb有效期输入= (inp: any, setInp: React.Dispatch<React.SetStateAction<any>>,name:string) => {
    return  <MemoDateInput value={(inp?.[name]) || ''} rows={1}
                           onChange={v => setInp({ ...inp, [name] :v || undefined}) } />
}
export const config焊接资格=[
    ['焊工姓名','n',60],['证件编号','z',166,],['项目代号','x',430,cb项目输入],['有效期','v',130,cb有效期输入],['焊工代号','H',80]
] as Each_ZdSetting[];
export const itemA焊接资格=['焊资表','焊资备注' ];
export const WeldingQualif=
    React.forwardRef(({ children, show ,alone=true,refWidth,label,}:Props,  ref
    ) => {
        const theme = useTheme();
        //因为useMeasureInpFilter(null,itemA附设装,);第三个参数带来的毛病 defvcbFunc ！
        const [getInpFilter]=useMeasureInpFilter(null,itemA焊接资格,);
        const {inp, setInp} = useItemInputControl({ ref });
        const headview=<Text variant="h5">
            {label}：
        </Text>;
        const [render]=useTableEditor({inp,setInp,
            headview, config: config焊接资格, table:'焊资表', });

        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={label!}>

                {render}
                备注：
                <BlobInputList value={inp?.焊资备注 || ''} rows={8} datalist={['以上焊工现场施焊期间，焊工证均在有效期内。']}
                               onListChange={v => setInp({ ...inp, 焊资备注 :v || undefined}) } />
                { children }
            </InspectRecordLayout>
        );
} );
//焊接作业人员资格明细表： PDF版可分解 很多张纸。
export const WeldingQualifVw= ({orc, rep} :{orc:any, rep:any}
) => {
    //const theme= useTheme();
    return <>
        <div css={{"@media print": {paddingBottom: '7rem', pageBreakInside: 'avoid'}} }>
            <Text id='WeldingQualif' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
            }}>现场焊接作业人员资格明细表</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["12%", "%" ] } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-7rem'}}} tight  miniw={800}>
            <TableBody>
                <TableRow>
                    <CCell>工程名称</CCell>
                    <CCell>{orc?.工程名称}</CCell>
                </TableRow>
            </TableBody>
        </Table>
        <Table fixed={ ["3.6%", "8%", "20%","%", "10.5%", "13%"] } css={{borderCollapse: 'collapse', }} tight  miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell><Text css={{fontSize:'0.75rem'}}>序号</Text></CCell><CCell><Text css={{fontSize:'0.75rem'}}>焊工姓名</Text></CCell><CCell>证件编号</CCell>
                    <CCell>项目代号</CCell><CCell>有效期</CCell><CCell><Text css={{fontSize:'0.75rem'}}>焊工代号</Text></CCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <RepLink rep={rep} tag={'WeldingQualif'}>
                    { (orc?.焊资表||[{}])?.map((o: any, i: number) => {
                        if(!(orc?.焊资表?.length>0))  return <TableRow key={i}><CCell colSpan={6}>空表</CCell></TableRow>;
                        return (
                            <TableRow key={i}>
                                <CCell>{i+1}</CCell>
                                <CCell>{o.n}</CCell>
                                <CCell>{o.z}</CCell>
                                <Cell css={{whiteSpace:'pre-wrap'}}>{o.x}</Cell>
                                <CCell>{o.v}</CCell>
                                <CCell>{o.H}</CCell>
                            </TableRow>
                        );
                    } ) }
                    <TableRow>
                        <Cell colSpan={6}><div css={{minHeight: '2rem',whiteSpace:'pre-wrap'
                        }}>备注：<br/>{orc.焊资备注}</div></Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </>;
};
